<template>
    <div class="myMessage">
        <div class="myMessage-head">
            <span>我的消息</span>
        </div>
        <div class="myMessage-body" v-for="(item, index) in messageList" :key="index">
            <div class="myMessage-body-content"> 
                <el-row>
                    <el-col :span="4"><el-image :src="item.imgUrl" class="image"></el-image></el-col>
                    <el-col :span="18">
                        <p>{{item.message}}</p><br>
                        <span>{{item.time}}</span>
                    </el-col>
                </el-row>
            </div>   
        </div> 
    </div> 
</template>

<script>
export default {
    data() {
        return {
            messageList: [
                {
                    imgUrl: require('@/assets/navImgs/avatar.jpg') ,
                    message: "你今天学习了吗",
                    time: "2021年11月10日 20:36",
                }
            ]
        }
    }

}
</script>

<style>
.myMessage-head {
    margin-top: 10px;
    margin-left:205px;
    width: 800px;
    height:30px;
    background-color:white;
    border-radius:5px;
}
.myMessage-body {
    margin-top: 10px;
    margin-left: 205px;
    width: 800px;
    background-color: white;
    border-radius:5px;
}
.myMessage-body-content {
    height: 100px;
}
.myMessage-body-content .image {
    margin: 8px;
    height: 80px;
    width: 80px;
    background-color: red;
}
.myMessage-body-content p {
    height: 20px;
}
.myMessage-body-content span{
    font-size: 12px;
    color: #A1A1A1;

}
</style>
